<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>订单发货-WMS仓库管理系统</title>
    <link rel="stylesheet" href="/css/hy.css">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <script src="/js/city.js"></script>
</head>
<body>
<style>
    html,
    body,
    .print-container {
        height: 100%;
    }

    .print-container {
        display: flex;
        flex-direction: column;
        padding: 10px 20px;
        background-color: #fff;
        box-sizing: border-box;
    }

    .ox-flex-box {
        display: flex;
        flex-shrink: 0;
    }

    .ox-flex-box.center {
        align-items: center;
    }

    .ox-flex-box.stretch {
        align-items: stretch;
    }

    .ox-flex-box.justify-between {
        justify-content: space-between;
    }

    .ox-flex-box .key {
        flex-shrink: 0;
    }

    #layuiDate {
        width: 200px;
        height: 40px;
    }

    .empty {
        width: 1px;
        height: 1px;
    }

    .mr5 {
        margin-right: 5px
    }

    .mt5 {
        margin-top: 5px
    }

    .ml5 {
        margin-left: 5px
    }

    .mb5 {
        margin-bottom: 5px
    }

    .w50 {
        width: 50px
    }

    .mr10 {
        margin-right: 10px
    }

    .mt10 {
        margin-top: 10px
    }

    .ml10 {
        margin-left: 10px
    }

    .mb10 {
        margin-bottom: 10px
    }

    .w100 {
        width: 100px
    }

    .mr15 {
        margin-right: 15px
    }

    .mt15 {
        margin-top: 15px
    }

    .ml15 {
        margin-left: 15px
    }

    .mb15 {
        margin-bottom: 15px
    }

    .w150 {
        width: 150px
    }

    .mr20 {
        margin-right: 20px
    }

    .mt20 {
        margin-top: 20px
    }

    .ml20 {
        margin-left: 20px
    }

    .mb20 {
        margin-bottom: 20px
    }

    .w200 {
        width: 200px
    }

    .mr25 {
        margin-right: 25px
    }

    .mt25 {
        margin-top: 25px
    }

    .ml25 {
        margin-left: 25px
    }

    .mb25 {
        margin-bottom: 25px
    }

    .w250 {
        width: 250px
    }

    .mr30 {
        margin-right: 30px
    }

    .mt30 {
        margin-top: 30px
    }

    .ml30 {
        margin-left: 30px
    }

    .mb30 {
        margin-bottom: 30px
    }

    .w300 {
        width: 300px
    }

    .mr35 {
        margin-right: 35px
    }

    .mt35 {
        margin-top: 35px
    }

    .ml35 {
        margin-left: 35px
    }

    .mb35 {
        margin-bottom: 35px
    }

    .w350 {
        width: 350px
    }

    .mr40 {
        margin-right: 40px
    }

    .mt40 {
        margin-top: 40px
    }

    .ml40 {
        margin-left: 40px
    }

    .mb40 {
        margin-bottom: 40px
    }

    .w400 {
        width: 400px
    }

    .mr45 {
        margin-right: 45px
    }

    .mt45 {
        margin-top: 45px
    }

    .ml45 {
        margin-left: 45px
    }

    .mb45 {
        margin-bottom: 45px
    }

    .w450 {
        width: 450px
    }

    .mr50 {
        margin-right: 50px
    }

    .mt50 {
        margin-top: 50px
    }

    .ml50 {
        margin-left: 50px
    }

    .mb50 {
        margin-bottom: 50px
    }

    .w500 {
        width: 500px
    }

    .pl20 {
        padding-left: 20px;
    }

    .pr20 {
        padding-right: 20px;
    }

    .btn {
        cursor: pointer;
        color: #39c;
    }

    .layui-form-label {
        width: 100px;
    }

    .layui-input-block {
        margin-left: 130px;
    }

    .overflow {
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
        vertical-align: middle;
    }

    .print-container .table-box .layui-table {
        table-layout: fixed;
    }

    .print-container .table-box .goods-table .goods-img {
        width: 30px;
        height: 30px;
        vertical-align: middle;
    }

    .ox-float-box {
        height: 60px;
        background-color: #fff;
    }

    .scroll-wrapper {
        position: relative;
        flex: 1;
    }

    .scroll-wrapper .scroll-box {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        overflow-y: auto;
    }

    .address-modal {
        position: absolute;
        z-index: 10;
        width: 400px;
        padding: 20px;
        display: none;
        border: 1px solid #e5e5e5;
        background-color: #fff;
    }

    .address-modal p {
        max-width: 360px;
        white-space: normal;
    }

    .address-modal a {
        color: #39c;
    }

    .address-input {
        position: absolute;
        left: -9999px;
    }

    #modify-modal {
        position: fixed;
        z-index: 2;
        left: 50%;
        top: 40%;
        width: 600px;
        transform: translate(-50%, -50%);
        border: 1px solid #e5e5e5;
        background-color: #fff;
    }

    #modify-modal .modal-title {
        padding: 0 40px;
        height: 60px;
        border-bottom: 1px solid #e5e5e5;
    }

    #modify-modal .modal-content {
        padding: 30px 40px 40px 0;
    }

    #modify-modal .layui-form-label {
        width: 80px;
    }

    #modify-modal .layui-input-block {
        margin-left: 110px;
    }

    #modify-modal .city-box {
        position: relative;
    }

    #modify-modal .city-select {
        position: absolute;
        z-index: 10;
        top: 50px;
        left: 110px;
        right: 0;
        height: 270px;
        display: flex;
        align-items: stretch;
        border-radius: 2px;
        background-color: #fff;
        border: 1px solid #e5e5e5;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
    }

    #modify-modal .city-select .scroll {
        flex: 1;
        height: 100%;
        overflow-y: auto;
    }

    #modify-modal .city-select .scroll li {
        height: 30px;
        display: flex;
        align-items: center;
        padding-left: 10px;
        cursor: pointer;
    }

    #modify-modal .city-select .scroll li.active {
        background: #39c;
        color: #fff;
    }

    #modify-modal .city-select .scroll li.active:hover {
        background: #39c;
        color: #fff;
    }

    #modify-modal .city-select .scroll li:hover {
        background: #39c;
        color: #fff;
    }

    #mask-box {
        position: fixed;
        z-index: 1;
        left: 0;
        bottom: 0;
        right: 0;
        top: 0;
        background-color: rgba(0, 0, 0, 0.2);
    }
</style>

<div class="print-container">
    <div class="ox-flex-box justify-between">
        <form class="layui-form" th:action="@{/order/fahuo}">
            <input type="hidden" name="print" th:value="${printStatus}" />
        <div class="ox-flex-box center">
            <div class="ox-flex-box center mr20">
                <span class="key mr20">创建时间范围</span>
                <input type="text" name="date" placeholder="请选择时间范围" class="layui-input" autocomplete="off" id="layuiDate">
            </div>
            <div class="ox-flex-box center">
                <button type="submit" class="layui-btn layui-btn-normal">搜索</button>
<!--                <span class="key mr20">地址范围</span>-->
<!--                <input type="text" placeholder="请选择地址范围" class="layui-input">-->
            </div>
        </div>

            <!--<div class="layui-form-item">-->
                <!--<label class="layui-form-label">筛选</label>-->
                <!--<div class="layui-input-block">-->
                    <!--<input type="checkbox" name="like[write]" lay-skin="primary" title="申请退款">-->
                    <!--<input type="checkbox" name="like[read]" lay-skin="primary" title="隐藏交易关闭">-->
                    <!--<input type="checkbox" name="like[dai]" lay-skin="primary" title="买家留言">-->
                    <!--<input type="checkbox" name="like[write]" lay-skin="primary" title="卖家备注">-->
                    <!--<input type="checkbox" name="like[read]" lay-skin="primary" title="裹裹包裹">-->
                    <!--<input type="checkbox" name="like[dai]" lay-skin="primary" title="锁定">-->
                    <!--<input type="checkbox" name="like[write]" lay-skin="primary" title="超36H未发货">-->
                <!--</div>-->
            <!--</div>-->
        </form>
    </div>
    <div class="ox-flex-box justify-between">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title" id="orderListLi" th:if="${printStatus==0}">
                <li class="layui-this" >未打单([[${notPrint}]])</li>
                <li  >
                    <a th:href="@{/order/fahuo(print=1)}">待发货有快递单([[${printed}]])</a>
                </li>
                <!--<li lay-id="sendedGoods">已发货(105)</li>-->
            </ul>
            <ul class="layui-tab-title"  th:if="${printStatus==1}">
                <li >
                    <a th:href="@{/order/fahuo}">未打单([[${notPrint}]])</a>
                </li>
                <li class="layui-this" >待发货有快递单([[${printed}]])</li>
                <!--<li lay-id="sendedGoods">已发货(105)</li>-->
            </ul>
        </div>
        <!--<form class="layui-form">-->
            <!--<div class="layui-form-item">-->
                <!--<label class="layui-form-label">全部商品详情</label>-->
                <!--<div class="layui-input-block">-->
                    <!--<input type="checkbox" name="xxx" lay-skin="switch">-->
                <!--</div>-->
            <!--</div>-->
        <!--</form>-->
    </div>
    <div class="scroll-wrapper">
        <div class="scroll-box">
            <div id="untreated" class="table-box">
                <table class="layui-table order-table" lay-skin="line">
                    <thead>
                    <tr>
                        <th width="2%"><input class="allCheck" type="checkbox"></th>
                        <th width="20%">收件信息</th>
                        <th width="10%">订单号</th>
                        <th>订单备注</th>
                        <th>总数</th>
                        <th>交易店铺</th>
                        <!--<th>销售类型</th>-->
                        <th>下单时间</th>
                        <th>订单状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <th:block th:each="item:${list}">
                    <tr >
                        <td><input class="currCheck" type="checkbox"></td>
                        <td>
                            <div><i th:text="${item.contactPerson}"></i> <i th:text="${item.mobile}"></i></div>
                            <div class="overflow hover-class">
                                <i th:text="${item.province}"></i>/ <i th:text="${item.city}"></i>/<i th:text="${item.area}"></i> <i th:text="${item.address}"></i>
                                <div class="address-modal">
                                    <div><i th:text="${item.contactPerson}"></i> <i th:text="${item.mobile}"></i></div>
                                    <div class="ox-flex-box justify-between">
                                        <p> <i th:text="${item.province}"></i>/ <i th:text="${item.city}"></i>/<i th:text="${item.area}"></i> <i th:text="${item.address}"></i></p>
                                        <input th:value="${item.address}" class="address-input"></input>
                                        <a class="copy-address" href="javascript:;">复制</a>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div><i th:text="${item.order_num}"></i></div>
                            <b class="btn check-goods">查看商品详情</b>
                        </td>
                        <td>
                            <i th:text="${item.remark}"></i><br />
                            <i th:text="${item.sellerMemo}"></i>
                        </td>

                        <td><b th:text="${item.totalQuantity}"></b></td>
                        <td><b th:text="${item.shopName}"></b></td>
                        <!--<td >-->
                            <!--<i th:if="${item.saleType == 0}">样品</i>-->
                            <!--<i th:if="${item.saleType == null || item.saleType == 1}">实售</i>-->
                        <!--</td>-->
                        <td>
                            <p><i th:text="${#dates.format(item.orderTime * 1000,'yyyy-MM-dd HH:mm:ss')}"></i></p>
<!--                            <p>拣货：<i th:text="${#dates.format(item.pickedTime * 1000,'yyyy-MM-dd HH:mm:ss')}"></i></p>-->
                        </td>
                        <td>
                            <b th:text="${T(com.b2c.wms.enums.EnumErpOrderSendStatus).getName(item.status)}"></b><br />
                            <b th:text="${T(com.b2c.wms.enums.EnumErpOrderlogisticsPrintStatus).getName(item.logisticsPrintStatus)}"></b><br />
                        </td>
                        <td>
                            <span class="btn modify-address" data-provice="广东省" data-city="深圳市" data-area="南山区"
                                  data-address="大冲商务中心" data-mobile="13548550707" data-name="王麻子" data-remarks="优先发货"
                                  data-order="545646553566">
                                    修改收货地址
                                </span>
                            <span class="btn">打印发货单</span>
                            <span class="btn">打印快递面单</span>
                        </td>
                    </tr>
                    <tr style="display: none;">
                        <td></td>
                        <td colspan="9">
                            <div class="table-box">
                                <table class="layui-table goods-table">
                                    <thead>
                                    <tr>
                                        <th width="20%">商品名称</th>
                                        <th>款号</th>
                                        <th>商品属性</th>
                                        <th>SKU</th>
                                        <th>数量</th>

                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr th:each="g:${item.items}">

                                        <td>
                                            <img class="goods-img"
                                                 th:src="${g.productImgUrl}"
                                                 alt="">
                                            <span style="width: 80%"
                                                  class="overflow" th:text="${g.getProductMallName()}"></span>
                                        </td>
                                        <td th:text="${g.productNumber}">56465456456</td>
                                        <td th:text="${g.getColorValue()+g.getSizeValue()}"></td>
                                        <td th:text="${g.skuNumber}">贤心</td>
                                        <td th:text="${g.quantity}">29</td>
                                    </tr>

                                    </tbody>
                                </table>
                            </div>

                        </td>
                    </tr>

                    </th:block>
                    </tbody>
                </table>
            </div>
            <div id="sendingGoods" style="display: none;" class="table-box">

            </div>
            <div id="sendedGoods" style="display: none;" class="table-box">

            </div>
            <div id="success" style="display: none;" class="table-box">

            </div>
        </div>
    </div>

    <div class="ox-float-box ox-flex-box justify-between center pl20 pr20" style="box-shadow: 0 0 20px #e4e4e4;">
        <span>已勾选<i id="order">0</i>个订单</span>
        <div class="float-btn">
            <button type="button" class="layui-btn layui-btn-normal">打印发货单</button>
            <button type="button" th:if="${printStatus==0}" class="layui-btn layui-btn-danger">打印快递面单</button>
            <button type="button" th:if="${printStatus==1}" class="layui-btn layui-btn-primary">一键发货</button>
        </div>
    </div>
</div>

<div id="modify-modal" style="display: none;">
    <div class="modal-title ox-flex-box justify-between center">
        <span>交易订单号 <i id="order-num"></i></span>
        <span id="modal-close" class="btn">关闭</span>
    </div>
    <div class="modal-content">
        <form class="layui-form" name="address-form" action="">
            <div class="layui-form-item city-box">
                <label class="layui-form-label">*收件地址</label>
                <div class="layui-input-block select-address">
                    <input name="area" type="text" style="cursor: pointer;" value="陕西省/西安市/鼓楼区" readonly
                           autocomplete="off" class="layui-input">
                </div>
                <div style="display: none;" class="city-select">
                    <div class="prov scroll">
                        <ul id="prov-box"></ul>
                    </div>
                    <div class="city scroll">
                        <ul id="city-box"></ul>
                    </div>
                    <div class="area scroll">
                        <ul id="area-box"></ul>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">*具体地址</label>
                <div class="layui-input-block">
                    <input name="address" type="text" placeholder="请输入具体地址" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">*收件人姓名</label>
                <div class="layui-input-block">
                    <input name="name" type="text" placeholder="请输入收件人姓名" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">*收件人电话</label>
                <div class="layui-input-block">
                    <input name="mobile" type="text" placeholder="请输入收件人电话" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item mb30">
                <label class="layui-form-label">卖家备注</label>
                <div class="layui-input-block">
                    <input name="remarks" type="text" placeholder="请输入卖家备注" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div id="mask-box" style="display: none;"></div>

<script>
    $(function () {

        // //tab选中效果
        // var tag = '[[${printStatus}]]';
        // if(tag==1){
        //     //已打印
        //     $("#orderListLi").find("li").eq(0).removeClass("layui-this");
        //     $("#orderListLi").find("li").eq(1).addClass("layui-this");
        // }

        var provList = city;
        var cityList = [];
        var areaList = [];

        var currProv = '';
        var currCity = '';
        var currArea = '';

        var currTab = 'untreated';

        var modalArr = [];

        layui.use('laydate', function () {
            var laydate = layui.laydate;
            laydate.render({
                elem: '#layuiDate',
                range: true
                ,min: -60 //30天前
                ,max: 0 //7天后
            });
        });
        layui.use('form');
        layui.use('element', function () {
            var element = layui.element;
            element.on('tab()', function () {
                const lay_id = this.getAttribute('lay-id');
                $('#' + lay_id).show();
                $('#' + currTab).hide();
                currTab = lay_id;
                $('#order').text(getResult(currTab));
            });
        });
        $('.check-goods').on('click', function () {
            var type = $(this).prop('type');
            if (type) {
                $(this).parents('tr').next().hide();
                $(this).prop('type', false);
                $(this).text('查看商品详情');
            } else {
                $(this).parents('tr').next().show();
                $(this).prop('type', true);
                $(this).text('收起商品详情');
            }
        });

        $(document).on('change', '.allCheck', function () {
            var checked = $(this).prop('checked');
            var checkList = $(this).parents('table').find('.currCheck');
            for (let i = 0; i < checkList.length; i++) {
                checkList.eq(i).prop('checked', checked);
            }
            $('#order').text(getResult(currTab));
        })

        $(document).on('change', '.currCheck', function () {
            var checked = $(this).prop('checked');
            var checkList = $(this).parents('table').find('.currCheck');
            var allCheck = $(this).parents('table').find('.allCheck');
            for (let i = 0; i < checkList.length; i++) {
                var currChecked = checkList.eq(i).prop('checked');
                if (!currChecked) {
                    allCheck.eq(0).prop('checked', false);
                    $('#order').text(getResult(currTab));
                    return;
                }
            }
            allCheck.eq(0).prop('checked', true);
            $('#order').text(getResult(currTab));
        });

        $(document).on('click', '.modify-address', function () {
            $('#modify-modal').show();
            $('#mask-box').show();
            var dataset = this.dataset;
            var form = document.forms['address-form'];
            form.area.value = dataset.provice + '/' + dataset.city + '/' + dataset.area;
            form.address.value = dataset.address;
            form.remarks.value = dataset.remarks;
            form.mobile.value = dataset.mobile;
            form.name.value = dataset.name;
            currProv = dataset.provice;
            currCity = dataset.city;
            currArea = dataset.area;
            $('#order-num').text(dataset.order);
        })

        $(document).on('click', '.select-address', function () {
            var type = $(this).prop('type');
            if (type) {
                $('.city-select').hide();
                $(this).prop('type', false);
            } else {
                $('.city-select').show();
                initAddressSelect($('#prov-box'), provList, currProv);
                cityList = getCurrList(currProv, provList);
                initAddressSelect($('#city-box'), cityList, currCity);
                areaList = getCurrList(currCity, cityList);
                initAddressSelect($('#area-box'), areaList, currArea);
                $(this).prop('type', true);
            }
        })

        $(document).on('click', '#mask-box', function () {
            $('#modify-modal').hide();
            $('#mask-box').hide();
        })

        $(document).on('click', '#modal-close', function () {
            $('#modify-modal').hide();
            $('#mask-box').hide();
        })

        $(document).on('click', '#prov-box li', function () {
            currProv = $(this).text();
            initAddressSelect($('#prov-box'), provList, currProv);
            cityList = getCurrList(currProv, provList);
            initAddressSelect($('#city-box'), cityList);
            areaList = [];
            currArea = "";
            initAddressSelect($('#area-box'), areaList);
        });

        $(document).on('click', '#city-box li', function () {
            currCity = $(this).text();
            initAddressSelect($('#city-box'), cityList, currCity);
            areaList = getCurrList(currCity, cityList);
            initAddressSelect($('#area-box'), areaList);
        })

        $(document).on('click', '#area-box li', function () {
            currArea = $(this).text();
            $('.city-select').hide();
            $('.select-address').prop('type', false);
            document.forms['address-form'].area.value = currProv + '/' + currCity + '/' + currArea;

        });

        $(document).on('mouseover', '.hover-class', function () {
            $(this).children('.address-modal').show();
        });

        $(document).on('mouseout', '.hover-class', function () {
            $(this).children('.address-modal').hide();
        });

        $(document).on('click', '.copy-address', function () {
            $(this).prev().select();
            if (document.execCommand) {
                document.execCommand("Copy");
                layer.msg('复制成功');
            } else {
                layer.open({
                    title: false,
                    content: '您的浏览器不支持复制，请手动复制'
                });
            }
        })

    })
    function getResult(currTab) {
        var result = 0;
        var checkList = $('#' + currTab).find('.currCheck');
        for (let i = 0; i < checkList.length; i++) {
            var currChecked = checkList.eq(i).prop('checked');
            if (currChecked) {
                result++;
            }
        }
        return result;
    }
    function initAddressSelect(box, list, curr) {
        var str = '';
        for (let i = 0; i < list.length; i++) {
            var item = list[i].value;
            if (item === curr) {
                str += '<li class="active">' + item + '</li>';
            } else {
                str += '<li>' + item + '</li>';
            }
        }
        box.html(str);
    }
    function getCurrList(curr, list) {
        for (let i = 0; i < list.length; i++) {
            var item = list[i];
            if (curr === item.value) {
                return item.children;
            }
        }
    }
</script>
</body>
</html>